<script setup lang="ts">
import { useDetail } from "@/hooks/detail";
import { getNewsList } from "@/api/news";
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { usePaging } from "@/hooks/pagination";
import type { News } from "@/types/news";
import { useImage } from '@/utils/Img';
const { baseImg } = useImage();
const { queryParams, setQueryParms, total, loadData } = usePaging();
defineOptions({
  name: 'NewsIndex'
});
setQueryParms({

})
import { ref } from 'vue';
const { navDetail } = useDetail()
const newsList = ref<News[]>()
const newsTopList = ref<News[]>()

const activeName = ref('first');
onMounted(() => {
  getData()
  getListIsTop()
})

function getData() {
  loadData(getNewsList).then(res => {
    newsList.value = res.rows
  })
}

function getListIsTop() {
  getNewsList({ isTop: 1 }).then(res => {
    newsTopList.value = res.rows.slice(0, 4)
  })
}

function handleClick(tab?: unknown) {
  console.log(tab);
}

</script>
<template>
  <div>
    <div class="w-1200 m-auto">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="新闻资讯" name="first">
          <div class="recommend flex gap-4">
            <div class="recommend-item" v-for="(item, i) in newsTopList" @click="navDetail(item.id, '1')" :key="i">

              <el-image class="inline-block recommend-item-bg w-full h-full" :src="baseImg(item.coverImage)">
                <template #error>
                  <div class=" col9">
                    <icon-picture class=" w-1/2 h-1/2 m-auto" />
                  </div>
                </template>
              </el-image>
              <div class="recommend-item-cover">
                <div class="recommend-item-cover-title">
                  {{ item.title }}
                </div>
                <div class="recommend-item-cover-time">
                  {{ item.createTime }}
                </div>
              </div>
            </div>
          </div>
          <div class="consult-content grid grid-cols-2 gap-4 mt-4">
            <div class="consult-content-x  flex flex-col" v-for="(item, i) in newsList" :key="i" @click="navDetail(item.id, '1')">
              <h2 class="text-4.5">{{ item.title }}</h2>
              <div class="consult-content-y  mt-auto">
                <p class="text-4 col9 mt-4 leading-6">{{ item.description }}</p>
                <div class="col9 text-3 mt-3">
                  <span style="padding-right: 30px;">阅读量：{{ item.viewCount }}</span>
                  <span>来源：{{ item.source }}</span>
                  <span class="inline-block float-right" style="margin-left: auto;">时间：{{ item.createTime }} </span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

      <div class="mt-15 mb-20 flex justify-center">
        <el-pagination background layout="prev, pager, next" v-model:current-page="queryParams.pageNum"
          @change="getData" v-model:page-size="queryParams.pageSize" :total="total" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.consult-content-x {
  background-color: #fff;
  box-shadow: 0 0 5px 0 rgba(0, 81, 255, .1);
  padding: 20px;
  cursor: pointer;

  p,
  h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
}

.recommend {
  .recommend-item {
    position: relative;
    width: calc(25% - 12px);
    height: 197px;
  }

  .recommend-item-cover {
    position: absolute;
    bottom: 0;
    height: 98px;
    width: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 93.3%, 0)), color-stop(rgba(29, 83, 160, .4)), to(#1d53a0));
    background-image: linear-gradient(hsla(0, 0%, 93.3%, 0), rgba(29, 83, 160, .4), #1d53a0);

    .recommend-item-cover-title {
      font-size: 16px;
      color: #fff;
      margin: 45px 20px 0;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .recommend-item-cover-time {
      margin-top: 8px;
      font-size: 12px;
      color: #eee;
      margin-left: 20px;
      margin-right: 20px;
      text-align: right;
    }
  }
}
</style>
